<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <title>智付系统</title>
    <link rel="stylesheet" href="../css/base.css" type="text/css" />
    <link rel="stylesheet" href="../css/style.css" type="text/css" />
</head>
<body class="bgc-fff">
<div class="wrapper">
    <div class="operate-top">运营概况</div>
    <div class="operate-box">
    	<div class="oeb-title">昨日数据</div>
        <div class="oeb-data">
        	<table>
            	<tr>
                	<td>
                    	<img src="../images/oeb-tb1.png" alt="" />
                        <span class="data-con">
                        	<p>当日总交易额</p>
                            <p class="d-val">263589</p>
                        </span>
                    </td>
                	<td>
                    	<img src="../images/oeb-tb2.png" alt="" />
                        <span class="data-con">
                        	<p>当日总交易笔</p>
                            <p class="d-val">78936</p>
                        </span>
                    </td>
                	<td>
                    	<img src="../images/oeb-tb3.png" alt="" />
                        <span class="data-con">
                        	<p>微信交易额</p>
                            <p class="d-val">263589</p>
                        </span>
                    </td>
                	<td>
                    	<img src="../images/oeb-tb4.png" alt="" />
                        <span class="data-con">
                        	<p>支付宝交易额</p>
                            <p class="d-val">78936</p>
                        </span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="operate-box mt20">
    	<div class="oeb-title">趋势走向<div class="trend-date"><a href="javascript:;" class="curr">月</a><a href="javascript:;">日</a></div></div>
        <div class="oeb-trend plr40 pt30">
        	<div class="trend-lab">
            	<a href="javascript:;" class="curr">全部交易场景</a>
            	<a href="javascript:;">微信服务号</a>
            	<a href="javascript:;">自助机扫码付</a>
            	<a href="javascript:;">全部交易场景</a>
            	<a href="javascript:;">当面付</a>
            </div>
            <div class="chart-trend mt20">
            	<div class="trend-ct">金额（万元）</div>
                <div class="trend-ch" id="trend"></div>
            </div>
        </div>
    </div>
    <div class="operate-box mt20">
    	<div class="oeb-title">年度统计</div>
        <div class="oeb-trend clearfix ptb30">
        	<div class="chart-stati" id="stati1">
            	
            </div>
        	<div class="chart-stati" id="stati2">
            	
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../widget/nicescroll/3.6.0/js/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="../widget/placeholder/2.0.7/js/jquery.placeholder.min.js"></script>
<link rel="stylesheet" href="../widget/artDialog/4.1.7/css/artDialog.css" type="text/css" />
<script type="text/javascript" src="../widget/artDialog/4.1.7/js/artDialog.js"></script>
<script type="text/javascript" src="../js/public.js"></script>
<script type="text/javascript" src="../widget/echarts/js/echarts.js"></script>
<script type="text/javascript">
$(function(){
	$('.trend-date a').on('click',function(){
		$(this).addClass('curr').siblings().removeClass('curr');
	});
});

$(document).on('click','.trend-lab a',function(){
	$(this).addClass('curr').siblings().removeClass('curr');
});

option1 = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月20日', '1月21日', '1月22日', '1月23日', '1月24日', '1月25日', '1月26日']
    },
    yAxis: {
        type: 'value'
    },
	grid:{
		left:'20',
		right:'20'
	},
    series: [{
        data: [3.9, 8.5, 11.5, 8.7, 12.8, 17.2, 8.7],
        type: 'line',
		smooth: true,
        areaStyle: {},
		label: {
			normal: {
				show: true,
				position: 'top'
			}
		},
		itemStyle:{
			color:{
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [{
					offset: 0, color: '#2a82fe' // 0% 处的颜色
				}, {
					offset: 1, color: '#877fed' // 100% 处的颜色
				}],
				globalCoord: false // 缺省为 false
			}
		}
    }]
};
var chart1 = echarts.init(document.getElementById('trend'));
chart1.setOption(option1);

option2 = {
	title:{
		text:'交易渠道占比图',
		bottom:'0',
		left:'center',
		textStyle:{
			fontSize:'14',
			fontWeight:'normal'	
		}
	},
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        right: '50',
        data:['微信','银联','支付宝']
    },
    series: [
        {
            name:'交易渠道占比图',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'微信',itemStyle:{color:'#3bca53'}},
                {value:310, name:'银联',itemStyle:{color:'#f39800'}},
                {value:234, name:'支付宝',itemStyle:{color:'#0090ff'}}
            ]
        }
    ]
};
var chart2 = echarts.init(document.getElementById('stati1'));
chart2.setOption(option2);

option3 = {
	title:{
		text:'支付渠道占比图',
		bottom:'0',
		left:'center',
		textStyle:{
			fontSize:'14',
			fontWeight:'normal'	
		}
	},
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        right: '50',
        data:['微信','银联','支付宝']
    },
    series: [
        {
            name:'支付渠道占比图',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'微信',itemStyle:{color:'#3bca53'}},
                {value:310, name:'银联',itemStyle:{color:'#f39800'}},
                {value:234, name:'支付宝',itemStyle:{color:'#0090ff'}}
            ]
        }
    ]
};
var chart3 = echarts.init(document.getElementById('stati2'));
chart3.setOption(option3);
</script>
</body>
</html>